<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Notifications - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <style>
        .notification-item {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
            transition: all 0.2s;
            position: relative;
        }
        .notification-item:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .notification-item.unread {
            border-left: 4px solid #007bff;
            background-color: #f8f9ff;
        }
        .notification-item.unread:before {
            content: '';
            width: 8px;
            height: 8px;
            background-color: #007bff;
            border-radius: 50%;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .notification-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .notification-type.system { background-color: #e3f2fd; color: #1976d2; }
        .notification-type.order { background-color: #f3e5f5; color: #7b1fa2; }
        .notification-type.promotion { background-color: #fff3e0; color: #f57c00; }
        .notification-type.security { background-color: #ffebee; color: #d32f2f; }
        .notification-level {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 8px;
        }
        .notification-level.normal { background-color: #e8f5e8; color: #4caf50; }
        .notification-level.important { background-color: #fff3cd; color: #856404; }
        .notification-level.urgent { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body class="notifications-page">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>Notifications</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page"><i class="an an-home icon-home"></i></a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <a th:href="@{/user/my-account}">My Account</a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>Notifications</span>
                    </div>
                </div>
            </div>
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <div class="row">
                <!-- 侧边栏导航 -->
                <div class="col-xl-2 col-lg-2 col-md-12 md-margin-20px-bottom">
                    <ul class="nav flex-column dashboard-list" role="tablist">
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Account</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Orders</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-favorites}">My Favorites</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-addresses}">Addresses</a></li>
                        <li><a class="nav-link active" th:href="@{/notifications}">Notifications</a></li>
                        <li><a class="nav-link" th:href="@{/personal-data}">Personal Data</a></li>
                        <li><a class="nav-link" href="#" onclick="logout()">Logout</a></li>
                    </ul>
                </div>

                <!-- 主要内容 -->
                <div class="col-xl-10 col-lg-10 col-md-12">
                    <div class="dashboard-content padding-30px-all md-padding-15px-all">
                        <div class="section-header style1 d-flex align-items-center justify-content-between mb-4">
                            <div class="section-header-left">
                                <h2>Message Center</h2>
                                <p>Stay updated with your orders, promotions and system notifications</p>
                            </div>
                            <div class="section-header-right">
                                <button class="btn btn-outline-primary btn-sm" onclick="markAllRead()">
                                    <i class="an an-check"></i> Mark All as Read
                                </button>
                                <button class="btn btn-outline-danger btn-sm" onclick="clearAll()">
                                    <i class="an an-times"></i> Clear All
                                </button>
                            </div>
                        </div>

                        <!-- 通知筛选tabs -->
                        <ul class="nav nav-tabs mb-4" id="notificationTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" 
                                   role="tab" aria-controls="all" aria-selected="true">
                                    All Notifications
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="unread-tab" data-bs-toggle="tab" data-bs-target="#unread" 
                                   role="tab" aria-controls="unread" aria-selected="false">
                                    Unread <span class="badge bg-primary ms-1">3</span>
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" 
                                   role="tab" aria-controls="orders" aria-selected="false">
                                    Orders
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="promotions-tab" data-bs-toggle="tab" data-bs-target="#promotions" 
                                   role="tab" aria-controls="promotions" aria-selected="false">
                                    Promotions
                                </a>
                            </li>
                        </ul>

                        <!-- 通知内容 -->
                        <div class="tab-content" id="notificationTabsContent">
                            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
                                <!-- 通知列表 -->
                                <div th:if="${notifications != null and notifications.records != null and !notifications.records.isEmpty()}">
                                    <div th:each="notification : ${notifications.records}">
                                        <div class="notification-item" 
                                             th:classappend="${!notification.isRead} ? 'unread'"
                                             th:onclick="|markAsRead(${notification.id})|">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div class="flex-grow-1">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <h6 class="mb-0" th:text="${notification.title}">Notification Title</h6>
                                                        <span class="notification-type ms-2" 
                                                              th:classappend="${notification.type == 1} ? 'system' : (${notification.type == 2} ? 'order' : (${notification.type == 3} ? 'promotion' : 'security'))"
                                                              th:text="${notification.type == 1} ? 'System' : (${notification.type == 2} ? 'Order' : (${notification.type == 3} ? 'Promotion' : 'Security'))">
                                                            System
                                                        </span>
                                                        <span class="notification-level ms-1" 
                                                              th:classappend="${notification.level == 1} ? 'normal' : (${notification.level == 2} ? 'important' : 'urgent')"
                                                              th:text="${notification.level == 1} ? 'Normal' : (${notification.level == 2} ? 'Important' : 'Urgent')">
                                                            Normal
                                                        </span>
                                                    </div>
                                                    <p class="mb-2 text-muted" th:text="${notification.content}">Notification content goes here...</p>
                                                    <small class="text-muted" th:text="${notification.createdTime}">2023-12-01 10:30</small>
                                                </div>
                                                <div class="notification-actions">
                                                    <button class="btn btn-sm btn-outline-danger" 
                                                            th:onclick="|deleteNotification(${notification.id}); event.stopPropagation();|">
                                                        <i class="an an-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 分页 -->
                                    <div class="pagination-section mt-4" th:if="${notifications.total > notifications.size}">
                                        <nav aria-label="Notifications pagination">
                                            <ul class="pagination justify-content-center">
                                                <li class="page-item" th:classappend="${notifications.current <= 1} ? 'disabled'">
                                                    <a class="page-link" th:href="@{/notifications(page=${notifications.current - 1})}">Previous</a>
                                                </li>
                                                <li class="page-item" th:each="pageNum : ${#numbers.sequence(1, notifications.pages)}"
                                                    th:classappend="${pageNum == notifications.current} ? 'active'">
                                                    <a class="page-link" th:href="@{/notifications(page=${pageNum})}" th:text="${pageNum}">1</a>
                                                </li>
                                                <li class="page-item" th:classappend="${notifications.current >= notifications.pages} ? 'disabled'">
                                                    <a class="page-link" th:href="@{/notifications(page=${notifications.current + 1})}">Next</a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                                <!-- 空状态 -->
                                <div th:if="${notifications == null or notifications.records == null or notifications.records.isEmpty()}" 
                                     class="text-center py-5">
                                    <i class="an an-bell" style="font-size: 4rem; color: #ddd;"></i>
                                    <h4 class="mt-3">No Notifications</h4>
                                    <p class="text-muted">You're all caught up! New notifications will appear here.</p>
                                </div>
                            </div>
                            
                            <!-- 其他tabs内容类似，这里简化 -->
                            <div class="tab-pane fade" id="unread" role="tabpanel" aria-labelledby="unread-tab">
                                <p class="text-center text-muted py-4">Unread notifications will be displayed here</p>
                            </div>
                            <div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
                                <p class="text-center text-muted py-4">Order-related notifications will be displayed here</p>
                            </div>
                            <div class="tab-pane fade" id="promotions" role="tabpanel" aria-labelledby="promotions-tab">
                                <p class="text-center text-muted py-4">Promotion notifications will be displayed here</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<div th:replace="~{include_header::footer}"></div>

<script th:src="@{/assets/js/vendor/jquery-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/plugins.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script>
// 标记单个通知为已读
function markAsRead(notificationId) {
    $.post('/notifications/read', {
        id: notificationId
    }).done(function(response) {
        if (response.success) {
            // 移除未读样式
            $(`[onclick*="${notificationId}"]`).removeClass('unread');
        }
    }).fail(function() {
        console.error('Failed to mark notification as read');
    });
}

// 标记所有通知为已读
function markAllRead() {
    // 这里需要获取所有未读通知的ID
    const unreadIds = [];
    $('.notification-item.unread').each(function() {
        const onclick = $(this).attr('onclick');
        if (onclick) {
            const match = onclick.match(/markAsRead\((\d+)\)/);
            if (match) {
                unreadIds.push(parseInt(match[1]));
            }
        }
    });
    
    if (unreadIds.length === 0) {
        alert('No unread notifications');
        return;
    }
    
    // 批量标记为已读
    unreadIds.forEach(id => {
        markAsRead(id);
    });
}

// 删除单个通知
function deleteNotification(notificationId) {
    if (confirm('Are you sure you want to delete this notification?')) {
        $.post('/notifications/delete', {
            ids: [notificationId]
        }, 'json').done(function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert(response.message || 'Failed to delete notification');
            }
        }).fail(function() {
            alert('Network error, please try again');
        });
    }
}

// 清空所有通知
function clearAll() {
    if (confirm('Are you sure you want to delete all notifications? This action cannot be undone.')) {
        const allIds = [];
        $('.notification-item').each(function() {
            const onclick = $(this).attr('onclick');
            if (onclick) {
                const match = onclick.match(/markAsRead\((\d+)\)/);
                if (match) {
                    allIds.push(parseInt(match[1]));
                }
            }
        });
        
        if (allIds.length > 0) {
            $.post('/notifications/delete', {
                ids: allIds
            }, 'json').done(function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert(response.message || 'Failed to clear notifications');
                }
            }).fail(function() {
                alert('Network error, please try again');
            });
        }
    }
}

// 用户注销
function logout() {
    if (confirm('Are you sure you want to logout?')) {
        $.post('/user/logout').done(function() {
            window.location.href = '/';
        });
    }
}
</script>

</body>
</html> 